<template>
	<view class="content">
		<map style="width: 100%; height: 400px;" :scale="14" :latitude="latitude" :longitude="longitude"
			:polyline="covers">
		</map>
		<view class="text-area">
			<!-- 用户下拉，选择设备id -->
			<!-- <select class="uni-select" v-model="userId">
		  <option v-for="d in deviceIdList" :key="d.deviceId" :value="d.deviceId">
		  {{d.deviceId}}-{{d.username}}</option>
	  </select> -->
			<view class="uni-list-cell-db">
				<picker v-if="deviceIdList.length>0" @change="bindPickerChange" :value="userId" :range="array"
					mode="selector">
					<view class="uni-input">{{array[userId]}}</view>
				</picker>
			</view>
			<button class="uni-input" @click="getLocation">登录{{ covers[0].points.length }}{{userId}}</button>
		</view>
		<view class="view-box">员工的信息:</view>
		<view v-if="user.length>0" class="view-user">
			id:{{user[0].userId}}
			<br>
			姓名:{{user[0].username}}
			<br>
			角色名称:{{user[0].role.name}}
			<br>
			角色级别:{{user[0].role.remark}}
			<br>
		</view>
		<!-- 和后台 websocket 通讯聊天界面：只收不发，收到消息后语言播报 -->
		<view v-if="message.text">收到系统消息：{{message.text}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: 'A234',
				latitude: 26.5197,
				longitude: 106.6669,
				covers: [{
					color: "#0000AA",
					points: []
				}],
				/* 用户信息*/
				user: [],
				/* 设备id下拉集合*/
				deviceIdList: [],
				array: [],
				//收到websocket发送的消息
				message: {}
			}
		},
		
		onLoad() {
			/* deviceIdList集合*/
			uni.request({
				url: "http://192.168.8.233:8080/userList",
				header: {
					"content-type": "application/json",
				},
				success: (res) => {
					this.deviceIdList = res.data
					this.array = this.deviceIdList.map(device => device.deviceId);
				}
			});
			
		},
		methods: {
			bindPickerChange: function(e) {
				//console.log('picker发送选择改变，携带值为', e.detail.value)
				this.userId = this.deviceIdList[e.detail.value].deviceId;
			},

			getCurrentDateTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');

				return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
			},
			getLocation() {
				/* 获取用户信息 */
				uni.request({
					method: "get",
					url: "http://192.168.8.233:8080/userList?deviceId=" + this.userId,

					header: {
						"content-type": "application/json",
					},
					success: (res) => {
						this.user = res.data
					}
				});
				//即时通信
				uni.connectSocket({
					url: 'ws://192.168.8.233:8080/ws/' + this.userId,
				});
					
					//收到服务器内容
					uni.onSocketMessage(res => {
						this.message = JSON.parse(res.data)
						//语音播报
						const utterance = new SpeechSynthesisUtterance(this.message.text);
						window.speechSynthesis.speak(utterance);

					});

				//自动打卡  调用 /userSign接口
				setInterval(() => {
					uni.getLocation({
						type: 'gcj02',
						success: ({
							latitude,
							longitude,
							speed,
							accuracy,
							altitude
						}) => {
							uni.request({
								method: "post",
								url: 'http://47.93.32.193:9200/gyhat02/_doc', //仅为示例，并非真实接口地址。
								data: {
									latitude,
									longitude,
									speed,
									accuracy,
									altitude,
									userId: this.userId,
									date: this.getCurrentDateTime()
								},
								header: {
									"content-type": "application/json",
									'Authorization': 'Basic ZWxhc3RpYzoxMjM0NTY=' //自定义请求头信息
								},
								success: (res) => {
									//console.log(res.data);
								}
							});

							this.covers[0].points.push({
								latitude,
								longitude
							})
						}
					});
				}, 5000)
			}

		}
	}
</script>

<style>
	.content {
		background-color: gainsboro;
		height: 100vh;
	}

	.uni-input {
		text-align: center;
		background-color: white;
		height: 50px;
		margin: 20px;
		/* padding: 10px; */
	}

	.uni-select {
		text-align: center;
		width: 200px;
		padding: 10px;
		margin-top: 20px;
		margin-left: 100px;
	}

	.view-box {
		text-align: center;
		background-color: white;
		height: 25px;
		width: 100px;
		padding: 10px;
		margin-left: 30px;
	}

	.view-user {
		display: block;
		background-color: white;
		margin-left: 30px;
		padding: 10px;
		width: 200px;
	}
</style>